/**
 *  组件的 children prop
 *
 *      前置知识：写在组件开始标签与闭合标签中的内容，默认是不会渲染的。如果需要渲染的话，在Vue中就是要应用 slot 技术。
 *
 *      React 中，组件开始标签与闭合标签中写的内容会作为一个 名叫 children 的 prop 传递给组件。
 *      组件内，可以自行选择如何使用。
 *
 *  React 中，如何实现 作用域插槽（将子组件的数据用于插槽内容）
 *      1. 传递的 children 不要直接是一个 React 元素，可以传递一个 函数，函数内部返回 React 元素。
 *      2. 子组件收到的 children 这些需要主动加括号来调用。可以在括号上传递参数。
 */

import { Component } from "react";

class Hello extends Component {
  render() {
    console.log("Hello.props", this.props);

    return (
      <div>
        <h2>Hello</h2>
        {this.props.children}
      </div>
    );
  }
}

/**
 * 如果期望组件可以接受到多个 插槽内容，这时建议设置多个 prop 。不要直接使用 children 这个 prop 了
 */
class Dialog extends Component {
  render() {
    console.log("Dialog.props", this.props);
    return (
      <div>
        <div className="header">{this.props.header}</div>
        <div className="body">{this.props.body}</div>
        <div className="footer">{this.props.footer}</div>
      </div>
    );
  }
}

class Parent extends Component {
  render() {
    const name = "Parent";

    return (
      <div>
        <h2>Parent</h2>
        <hr />
        <Son>
          {(name) => {
            return <span>{name}</span>;
          }}
        </Son>
      </div>
    );
  }
}

class Son extends Component {
  render() {
    const name = "Son";

    return <button>Son - {this.props.children(name)}</button>;
  }
}

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <Parent></Parent>

      <hr />

      <Hello>
        <button>我的天，React 真简单</button>
      </Hello>

      <Dialog
        header={<div>头部</div>}
        body={<div>内容</div>}
        footer={<div>尾部</div>}
      ></Dialog>
    </div>
  );
}
